<template>
  <div class="signUp">
    <div class="breadcrumb">
      <div class="width">
        <div class="news_list_content_breadcrumb">
          <t-breadcrumb>
            <t-breadcrumb-item to="/dashboard/base"> 首页 </t-breadcrumb-item>
            <t-breadcrumb-item to="/signUp">比赛报名</t-breadcrumb-item>
            <t-breadcrumb-item>报名详情</t-breadcrumb-item>
          </t-breadcrumb>
        </div>
      </div>
    </div>
    <div class="signUp_conten">
      <h3 class="title">
        参赛报名表
        <span></span>
      </h3>
      <img src="/src/assets/siginUpBj.png" alt="" class="pc signImg" />
      <img src="/src/assets/siginUpBj_ms.png" alt="" class="ms signImg" />
      <div class="signUp_Box">
        <div class="width">
          <!-- <t-form
            class="signUp_form"
            ref="form"
            :model="formData"
            :rules="rules"
            label-width="120px"
          >
            <t-row>
              <t-col :span="6">
                <t-form-item label="真实姓名" name="fullName">
                  <t-input
                    v-model="formData.fullName"
                    placeholder="请您输入真实姓名"
                  />
                </t-form-item>
              </t-col>
              <t-col :span="6">
                <t-form-item label="证件类型" name="certificate">
                  <t-select
                    v-model="formData.certificate"
                    class="demo-select-base"
                    clearable
                    filterable
                  >
                    <t-option
                      v-for="(item, index) in certificateType"
                      :key="index"
                      :value="item.value"
                      :label="item.label"
                    >
                      {{ item.label }}
                    </t-option>
                  </t-select>
                </t-form-item>
              </t-col>
              <t-col :span="6">
                <t-form-item label="手机号码" name="phone">
                  <t-input
                    v-model="formData.phone"
                    placeholder="请您输入手机号码"
                  />
                </t-form-item>
              </t-col>
              <t-col :span="6">
                <t-form-item label="证件号码" name="IDNO">
                  <t-input
                    v-model="formData.IDNO"
                    placeholder="请您输入证件号码"
                  />
                </t-form-item>
              </t-col>
              <t-col :span="6">
                <t-form-item label="电子邮箱" name="email">
                  <t-input
                    v-model="formData.email"
                    placeholder="请您输入电子邮箱"
                  />
                </t-form-item>
              </t-col>
              <t-col :span="6">
                <t-form-item label="学校名称" name="schoolName">
                  <t-input
                    v-model="formData.schoolName"
                    placeholder="请您输入学校名称"
                  />
                </t-form-item>
              </t-col>
              <t-col :span="6">
                <t-form-item label="监护人姓名" name="guardianName">
                  <t-input
                    v-model="formData.guardianName"
                    placeholder="请您输入监护人姓名"
                  />
                </t-form-item>
              </t-col>
              <t-col :span="6">
                <t-form-item label="就读年纪" name="age">
                  <t-select
                    v-model="formData.age"
                    class="demo-select-base"
                    clearable
                    filterable
                  >
                    <t-option
                      v-for="(item, index) in ageType"
                      :key="index"
                      :value="item.value"
                      :label="item.label"
                    >
                      {{ item.label }}
                    </t-option>
                  </t-select>
                </t-form-item>
              </t-col>
              <t-col :span="6">
                <t-form-item label="监护人手机号" name="guardianPhone">
                  <t-input
                    v-model="formData.guardianPhone"
                    placeholder="请您输入监护人手机号"
                  />
                </t-form-item>
              </t-col>
              <t-col :span="6">
                <t-form-item label="监护人身份证号" name="identityId">
                  <t-input
                    v-model="formData.identityId"
                    placeholder="请您输入监护人身份证号"
                  />
                </t-form-item>
              </t-col>
            </t-row>
          </t-form> -->

          <dynamic-form
            v-model="formData"
            :form-items="formItems"
            :form-attribute="formAttribute"
            @get-form-ref="
              (formDom) => {
                formRef = formDom;
              }
            "
          />
          <div class="button_box">
            <t-button class="submit" type="submit" @click="onSubmit"
              >上传</t-button
            >
            <t-button class="cancel" @click="cancel">取消</t-button>
          </div>
        </div>
      </div>
    </div>
    <footer class="copyright"></footer>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { MessagePlugin, FormRule } from "tdesign-vue-next";

import { DynamicForm } from "@/libs/components/dynamicForm";
import {
  formAttribute,
  formData,
  formItems,
  formRef,
  resetFormData,
} from "./constants";
const onSubmit = async () => {
  const result = await formRef.value?.validate();

  if (result !== true) {
    return;
  }
  // 调用接口
  // postData(cancel);
};
const cancel = () => {
  resetFormData();
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
